<script setup lang="ts">
import CdlDescriptions from "@/components/descriptions";
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import {DescriptionsTree} from "@/interfaces/components/Descriptions";
import {InsuranceItem, Insure} from "@/interfaces/views/vehicle/insure";
import CdlTable from "@/components/table";
import {TableTree} from "@/interfaces/components/Table";
import {FormData} from "@/interfaces/components/Page";
import {useInsureInfoApi} from "@/api/vehicle/insure";
import {mergeObjects} from "@/utils/utilities";
import {Bills} from "@/interfaces/views/finance/bills";

const router = useRouter()
const route = useRoute()
if(route.query.id) initData()

const basicDetailTree: DescriptionsTree<Insure> = [
  {label: "关联车辆", prop: "licensePlate"},
  {label: "经办人", prop: "handler"},
  {label: "到期日期", prop: "expTime"},
  {label: "处理状态", prop: "status", dict: "insure_status"},
  {label: "保险公司", prop: "insuranceCompany"},
  {label: "投保日期", prop: "effectiveTime"},
  {label: "保险单号", prop: "insurancePolicyNum"},
  {label: "保险金额", prop: "fee"},
  {label: "保额", prop: "coverage"},
  {label: "备注", prop: "remark"},
]
const basicDetail = ref<FormData<Insure>>({
  id: undefined,
  licensePlate: "",
  handler: "",
  expTime: "",
  status: undefined,
  insuranceCompany: "",
  effectiveTime: "",
  insurancePolicyNum: "",
  fee: "",
  coverage: "",
  remark: ""
})

const insureTableTree: TableTree<InsuranceItem> = {
  colRule: [
    {ti: "保险类型", prop: "type", dict: "insure_type"},
    {ti: "保费（RMB）", prop: "fee"},
    {ti: "保额（RMB）", prop: "coverage"},
  ]
}
const insureData = ref<InsuranceItem[]>([])
const billData = ref<Bills[]>([])

/**
 * 跳转编辑
 */
function jumInsureUpdate(){
  router.push({
    path: "/vehicleManage/insure/createAndModifyInsure",
    query: {
      id: route.query.id
    }
  })
}
/**
 * 初始化数据
 */
function initData(){
  useInsureInfoApi(route.query.id as string).then(res => {
    const {bills, insuranceItems, ...rest} = res.data
    mergeObjects(basicDetail.value, rest)
    insureData.value = insuranceItems
    billData.value = bills
  })
}
/**
 * 回退页面
 */
function fallbackPage(){
  router.back()
}
</script>

<template>
  <el-card style="position: relative">
    <button class="back_btn" @click="fallbackPage"></button>
    <div class="main_control">
      <el-button type="success" @click="jumInsureUpdate" v-auth="'vehicle:insure:update'">编辑</el-button>
      <el-button type="danger" v-auth="'vehicle:insure:delete'">删除</el-button>
    </div>
    <h1 class="top_line">基础信息</h1>
    <el-divider></el-divider>
    <CdlDescriptions :model="basicDetail" :template-tree="basicDetailTree"></CdlDescriptions>
    <h1>保单项详情</h1>
    <el-divider></el-divider>
    <CdlTable :data="insureData" :template-tree="insureTableTree" border></CdlTable>
  </el-card>
</template>
